
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Cross-Domain JSON Transaction &mdash; Retrieving a News Feed from Yahoo! Pipes</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
#output li {margin-left:2em;}
#output { background-color:#FFFFFF; border:1px dotted #666666; padding:1em; margin-top:1em;}
</style>
<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Cross-Domain JSON Transaction &mdash; Retrieving a News Feed from Yahoo! Pipes</h1>

<div class="exampleIntro">
	<p>In the example below, IO is employed to make a cross-domain request to <a href="http://pipes.yahoo.com">Yahoo! Pipes</a>.  The output of the Pipe is an RSS-style feed formatted as JSON.  We pass that output to the JSON Utility's <code>parse</code> method for sanitization and then display the contents of the Pipe in a list.</p>

<p>The cross-domain approach obviates the need for a server-side proxy, making it faster. And the use of IO in place of a script node allows us to retrieve the JSON data as a string and execute <code>JSON.parse</code> against it, making it safer to use; a script node would evaluate immediately in the global scope as soon as it was loaded.</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<button id="fetch" disabled="disabled">Load JSON RSS news feed from Yahoo! Pipes.</button>

<div id="output">
	<ul>
		<li>Content from Yahoo! Pipes feed will display here.</li>
    </ul>
</div>

<script language="javascript">

YUI().use("io", "substitute", "json-parse",

	function(Y) {

		//Data fetched will be displayed in a UL in the
		//element #output:
		var output = Y.Node.get("#output ul");

		//Configure the cross-domain protocol:
		var xdrConfig = {
			id:'flash', //We'll reference this id in the xdr configuration of our transaction.
			yid: Y.id,  //The yid provides a link from the Flash-based XDR engine
						//and the YUI instance.
			src:'../../build/io/io.swf?t=' + new Date().valueOf().toString() //Relative path to the .swf file from the current page.
		};
		Y.io.transport(xdrConfig);

		//Event handler called when the transaction begins:
		var handleStart = function(id, a) {
			Y.log("io:start firing.", "info", "example");
			output.set("innerHTML", "<li>Loading news stories via Yahoo! Pipes feed...</li>");
		}

		//Event handler for the success event -- use this handler to write the fetched
		//RSS items to the page.
		var handleSuccess = function(id, o, a) {

			//We use JSON.parse to sanitize the JSON (as opposed to simply eval'ing
			//it into the page):
			var oRSS = Y.JSON.parse(o.responseText);

			//From here, we simply access the JSON data from where it's provided
			//in the Yahoo! Pipes output:
			if (oRSS && oRSS.count) {

				var s = "<!--begin news stories fetched via Yahoo! Pipes-->",
					//t in this case is our simple template; this is fed to
					//Y.Lang.substitute as we loop through RSS items:
					t = "<li><a href='{link}'>{title}</a>, {pubDate}</li>";

				for (var i=0; i<oRSS.count; i++) {
					s += Y.Lang.substitute(t, oRSS.value.items[i]);
				}

				//Output the string to the page:
				output.set("innerHTML", s);
				output.addClass("yui-null");

			} else {
				//No news stories were found in the feed.
				var s = "<li>The RSS feed did not return any items.</li>";
			}
		}

		//In the event that the HTTP status returned is > 399, a
		//failure is reported and this function is called:
		var handleFailure = function(id, o, a) {
			Y.log("ERROR " + id + " " + a, "info", "example");
		}

		//With all the aparatus in place, we can now configure our
		//io call.
		var cfg = {
			method: "GET",
			xdr: {
				use:'flash' //This is the xdrConfig id we referenced above.
			},
			on: {
				//Our event handlers previously defined:
				start: handleStart,
				success: handleSuccess,
				failure: handleFailure
			}
		};

		//Wire the buttton to a click handler to fire our request each
		//time the button is clicked:
		var handleClick = function(o) {
			Y.log("Click detected; beginning io request to Yahoo! Pipes.", "info", "example");
			var obj = Y.io(
				//this is a specific Pipes feed, populated with cycling news:
				"http://pipes.yahooapis.com/pipes/pipe.run?_id=giWz8Vc33BG6rQEQo_NLYQ&_render=json",
				cfg
			);
		}

		//add the clickHandler as soon as the xdr Flash module has
		//loaded:
		Y.on('io:xdrReady', function() {
			var fetch = Y.Node.get("#fetch");
			fetch.set("disabled", false);
			Y.on("click", handleClick, fetch);
		});

	}
);
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
